<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login | Eletronorte</title>
        <h:outputStylesheet library="css" name="style.css" />
        <link rel="icon" href="#{request.contextPath}/_img/favicon.ico" type="image/ico" />
    </h:head>

    <h:body>

        <!--
        <script>
            window.onload = function () {
                if (!window.location.hash) {
                    window.location = window.location + '#loaded';
                    window.location.reload();
                }
            };
        </script>
        -->
        
        <p:dialog widgetVar="statusDialog" modal="true" draggable="false"
                  closable="false" resizable="false" showHeader="false"
                  onShow="document.getElementById('interface').className += ' modal';
                          document.body.className += ' modal-open'"
                  onHide="document.getElementById('interface').className =
                          document.getElementById('interface').className.replace(/(?:^|\s)modal(?!\S)/g , '');
                          document.body.className =
                          document.body.className.replace(/(?:^|\s)modal-open(?!\S)/g , '')">
            <h:graphicImage library="img" name="ajax-loader.gif" />
        </p:dialog>

        <div id="interface">
            <table id="table-header" cellpadding="0" cellspacing="0">
                <!-- TOPO -->
                <tr>
                    <td><ui:include src="../template/header.xhtml" /></td>
                </tr>
            </table>            

            <div id="conteudo">
                <div id="painel_esquerda" align="left">
                    <h2 style="margin-top: 71px;">
                        Bem-vindo ao Sistema de Pesca e Ictiofauna
                    </h2>
                    <p style="font-family: Arial,sans-serif;color: #555;">
                        Entre com sua conta de usuário para ter acesso ao sistema.
                    </p>
                </div>
                <div id="painel_direita" align="center">
                    <div style="top: 29px; position: relative">
                        <h:form id="form1">

                            <p:growl id="campoObrigatorio" life="4000" showDetail="false"
                                     rendered="#{facesContext.validationFailed == true}" />
                            <p:growl for="atencao" id="atencao" life="4000" showDetail="true" />
                            <p:growl for="erro" id="erro" life="4000" showDetail="true" />
                            <p:growl for="sucesso" id="sucesso" life="4000" showDetail="true" autoUpdate="true" />

                            <p:panelGrid styleClass="painel_login" columns="1">
                                <h2 style="text-align: left;">Login</h2>
                                <p:inputText id="usuario" value="#{usuarioBean.usuario}"
                                             size="33" required="true"
                                             requiredMessage="Campo Usuário Obrigatório!">
                                    <p:watermark for="usuario" value="Usuário" />
                                    <p:focus for="usuario" />
                                </p:inputText>
                                <p:password id="senha" value="#{usuarioBean.senha}"
                                            size="33" required="true"
                                            requiredMessage="Campo Senha Obrigatório!">
                                    <p:watermark for="senha" value="Senha" />
                                </p:password>
                                <p:commandButton id="entrar" value="Entrar"
                                                 action="#{usuarioBean.logar()}"
                                                 update="campoObrigatorio atencao erro"
                                                 ajax="false" onclick="PF('statusDialog').show()"/>
                            </p:panelGrid>
                        </h:form>
                    </div>
                </div>
            </div>

            <!-- RODAPE -->
            <table id="table-footer">
                <ui:include src="../template/footer.xhtml" />
            </table>
        </div>
    </h:body>
</html>
